<template>
  <div class="bbx-list-nodata-view">
    <div class="bbx-list-nodata-view-img-container">
      <img :style="imgStyle" :src="NO_DATA_IMG" />
    </div>
    <div class="bbx-list-nodata-view-notice">{{ noticeMsg }}</div>
  </div>
</template>

<script>
import { t } from '@src/locales'
import { getOssUrl } from '@src/util/assets'
const NO_DATA_IMG =  getOssUrl('/no_data.png');

export default {
  name:'BaseListForNoData',
  props: {
    noticeMsg: {
      type: String,
      default: t('common.base.tip.noData'),
    },
    tableType: {
      type: String,
      default: 'bigTable'
    }
  },
  data(){
    return {
      NO_DATA_IMG
    }
  },
  computed: {
    imgStyle() {
      let pixel = this.tableType === 'smallTable' ? '80px' : '160px'
      return {width: pixel, height: pixel}
    }
  }
};
</script>

<style lang="scss" scoped>
.bbx-list-nodata-view {
  padding: 20px 0;
  &-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
    .bbx-list-nodata-view-img {
      width: 160px;
      height: 160px;
    }
  }
  &-notice {
    line-height: 20px;
    padding-top: 8px;
    text-align: center;
    color: #BFBFBF;
    font-size: $font-size-base;
  }
}
</style>
